<script lang="ts" setup>
import { ref, watch } from 'vue';
import { RangeCalendar } from '@/components/ui/range-calendar';
import { useCalendarStore } from '@/stores/calendar';
import { getLocalTimeZone, today } from '@internationalized/date';
import type { DateRange } from 'reka-ui';

const calendarStore = useCalendarStore();

const start = today(getLocalTimeZone());
const end = start.add({ days: 7 });
const dateRange = ref<DateRange>({
  start,
  end,
}) as Ref<DateRange>;

watch(dateRange, newVal => {
  const startDate = newVal.start?.toString() ?? start.toString();
  const endDate = newVal.end?.toString() ?? end.toString();
  calendarStore.setDateRange({ start: startDate, end: endDate });
});
</script>

<template>
  <div class="w-[250px]">
    <RangeCalendar v-model="dateRange" class="rounded-md border" />
  </div>
</template>
